<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>商品详情</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
	<div class="mui-content">
		<!-- 轮播 -->
		<div class="goods-slider">
			<div class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item"><a href="#"><img src="../../../../images/home/demo.jpg" /></a>
					</div>
					<div class="mui-slider-item"><a href="#"><img src="../../../../images/home/demo.jpg" /></a>
					</div>
					<div class="mui-slider-item"><a href="#"><img src="../../../../images/home/demo.jpg" /></a>
					</div>
					<div class="mui-slider-item"><a href="#"><img src="../../../../images/home/demo.jpg" /></a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="goods-detail-info">
			<div class="title">
				黑精华抗衰老紧致补水保湿精华液
				官方正品50mL 今日下单即赠10mL新品试用小444454654564465
			</div>
			<div class="price-info">
				<div class="detail-price">
					￥
					<span class="price-num">66</span>
				</div>
				<div class="goods-code">
					编号：<span class="code">1234</span>
				</div>
			</div>
		</div>
		<!-- 客户评价 -->
		<div class="customer-reviews">
			<div class="reviews-title">
				<div class="title-left">
					<span class="line"></span>
					<span>客户评价</span>
				</div>
				<div class="title-right">
					<span>查看全部</span>
					<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
				</div>
			</div>
			<!-- 评价展示一个 -->
			<div class="customer-reviews-list">
				<div class="customer-info">
					<div class="customer-info-left">
						<img src="../../../../images/home/demo.jpg" class="avatar-img">
						<span class="customer-name">王hhhh</span>
						<div class="evaluate-star-list">
							<img src="../../../../images/home/icon_details_evaluate_star_light.png"
								class="evaluate_star ling-star">
							<img src="../../../../images/home/icon_details_evaluate_star_light.png"
								class="evaluate_star ling-star">
							<img src="../../../../images/home/icon_details_evaluate_star_light.png"
								class="evaluate_star ling-star">
							<img src="../../../../images/home/icon_details_evaluate_star_light.png"
								class="evaluate_star ling-star">
							<img src="../../../../images/home/icon_details_evaluate_star_grey.png"
								class="evaluate_star grey-star">
						</div>
					</div>
					<div class="customer-info-right">
						2021-03-22
					</div>
				</div>
				<div class="reviews-content">
					特别好用！试用一次就能看出来效果了，真的特别明显，
					这套用完打算再多买几套
				</div>
				<div class="reviews-img-list">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
					<img src="../../../../images/home/demo.jpg" class="reviews-img">
				</div>
			</div>
			<!-- 无评价展示 -->
			<!-- <div class="no-reviews">
					暂无评价
				</div> -->
		</div>
		<!-- 图文详情 -->
		<div class="img-text-detail">
			<div class="detail-line-box">
				<div class="detail-line">图文详情</div>
			</div>
		</div>
		<!-- 富文本展示区域 -->
		<div class="requset-html" id="requset-html">
			<!-- innerHTML 后台获取 -->
		</div>

	</div>
	<!-- 底部固定 -->
	<div class="edit-area">
		<div class="edit-cart edit-area-left">
			<img src="../../../../images/home/icon_details_shoppingcart.png" class="icon_details">
			<span class="cart-grey-text">购物车</span>
		</div>
		<div class="edit-star edit-area-left">
			<img id="collection" src="../../../../images/home/icon_details_collect_default.png" class="icon_details">
			<img hidden id="collectioned" src="../../../../images/home/icon_details_collect_selected.png"
				class="icon_details">
			<span id="collection-text" class="">收藏</span>
		</div>
		<div class="edit-btn add-cart-btn">
			加入购物车
		</div>
		<div class="edit-btn buy-btn">
			立即购买
		</div>
	</div>
	<!-- 弹出层 -->
	<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
		<div style="width: 100%;position: relative;">
			<img src="../../../../images/home/icon_details_close.png" id="icon_details_close">
			<div class="popover-content">
				<div class="popover-top">
					<img src="../../../../images/home/demo.jpg" class="goods-img">
					<p class="img-right">
						<span class="price">￥<span class="goods-num">198</span></span>
						<span class="price-total">库存：<span class="total-num">176件</span></span>
					</p>
				</div>
				<div class="popover-middle">
					<span>购买数量：<span class="have-goods-num">该商品在购物车内已有<span id="have-goods-num">2</span>件</span></span>
					<!-- 计数器插件 -->
					<!-- data-numbox-min 最大值  data-numbox-max 最小值-->
					<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9998'>
						<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input id="test" class="mui-input-numbox" type="number" value="1" disabled="disabled"/>
						<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>


			</div>
			<div class="popover-bottom">
				<button class="mui-btn cart-btn" type="button">加入购物车</button>
				<button class="mui-btn buy-btn" type="button">立即购买</button>
			</div>
		</div>

	</div>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../../js/resize.js"></script>
	<script type="text/javascript">
		mui.init()

		$(function ($) {
			// 文档一加载就执行
			$(document).ready(function () {
				obj.setRem()
			})
			// 窗口调节
			$(window).resize(function () {
				obj.setRem()
			});
			//商品图片轮播
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2500 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			// 收藏
			$('.edit-star').on('click', '#collection', function () {
				$('#collection').hide();
				$('#collectioned').show();
				$('#collection-text').text('已收藏');
				$('#collection-text').attr('class', 'cart-green-text');
			})
			// 取消收藏
			$('.edit-star').on('click', '#collectioned', function () {
				$('#collection').show();
				$('#collectioned').hide();
				$('#collection-text').text('收藏');
				$('#collection-text').attr('class', '');
			})
			// 点击立即购买和加入购物车弹出弹出层
			$('.edit-btn').click(function () {
				mui('#sheet').popover('show');
			})
			// 点击小×号
			$('#icon_details_close').click(function () {
				mui('#sheet').popover('hide');
			})
			// 去查看评价页面
			$('.title-right').click(function () {
				window.location.href = '../userReviews/index.html';
			})
		});
	</script>
</body>

</html>